<template>
  <Swiper
    :slidesPerView="3"
    :modules="modules"
    :grid="{
      fill: 'row',
      rows: 2,
    }"
    class="my-swiper"
  >
    <SwiperSlide v-for="(item, idx) in imgList" :key="item">
      <div class="relative">
        <img :src="item" alt="" />
        <div class="absolute bottom-4 left-6 z-10 text-white text-xl font-bold">第{{ idx + 1 }}张</div>
      </div>
    </SwiperSlide>
  </Swiper>
</template>

<script setup lang="ts">
import { Autoplay, Pagination, Grid } from 'swiper'
import type { Swiper } from 'swiper'
import 'swiper/css/autoplay'
import 'swiper/css/grid'

const modules = [Autoplay, Pagination, Grid]
//@ts-ignore
const basePath = import.meta.env.BASE_URL
console.log('basePath', basePath)
const imgList = new Array(7).fill(true).map((_, index) => `${basePath}swiper-pic/0${index + 1}.jpg`)
</script>

<style scoped lang="scss"></style>
